<template>
  <div class="rHeight" v-for="(item, index) in Order.all" key="index">
    <div class="fd" v-for="(k, index) in item" key="k.objectid">
      <van-card class="right" :price="k.price" desc="描述信息" :title="k.name" :thumb="k.img">
      </van-card>
      <van-stepper v-model="k.n" :min="0" :default-value="0" class="button" theme="round" button-size="22"
        @minus="handleMinus(k, item)" @plus="handleAdd(k, item)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
// import { drinkDel } from '../../api/orderDel';
import { ref } from 'vue';
import { useOrderDel } from '../../store/orderDel'
import { drinkDel, orderDel, selectedDel, stapleDel } from '../../api/orderDel'
import { List } from 'vant';
// const value = ref()
const Order = useOrderDel()
// console.log(Order.all.drink)
// console.log(Order.all)
// console.log(item)
interface List {
  img: string,
  objectId: string,
  price: string,
  name: string,
  num: string
}
const list = ref<Array<List>>()
// drinkDel().then(res => {
//   localStorage.setItem('drink', JSON.stringify(res.data.results))
// })

const handleMinus = (k: any, item: any) => {
  Order.cartMunisAction({
    ...k,
  })
  Order.nowNumberMunis({
    ...k,
    n: 0
  })
  console.log(k, item)

  // for (let i = 0; i < item.length; i++) {
  //   if (item[i].objectId == k.objectId) {
  //     item[i].n--;
  //     console.log(item[i].n)
  //     // localStorage.setItem('k', JSON.stringify(k))
  //     // return
  //   }
  // }
}
// onMounted(() => {
//   console.log(Order.all)
// })
const handleAdd = (k: any, item: any) => {
  Order.cartAddAction({
    ...k,
    n: 1
  });
  // Order.nowNumberAdd({
  //   ...k,
  //   n: 1
  // })
  console.log(k, item)
  // item.forEach((itm: List) => {
  // for (let i = 0; i < item.length; i++) {
  //   if (item[i].objectId == k.objectId) {
  //     item[i].n++;
  //     console.log(item[i].n)
  //     // localStorage.setItem('k', JSON.stringify(k))
  //     // return
  //   }
  // }
  // })
}


let lis = document.getElementsByClassName('rHeight')
console.log(lis)


orderDel().then(res => {
  Order.all.hot = res.data.results
  Order.all.menu = res.data.results
})

selectedDel().then(res => {
  Order.all.recommend = res.data.results
  Order.all.selected = res.data.results
})

stapleDel().then(res => {
  Order.all.staple = res.data.results
})
drinkDel().then(res => {
  Order.all.drink = res.data.results
})
</script>

<style lang="scss" scoped>
.fd {
  display: flex;
  width: 295px;

  .button {
    line-height: 104px;
  }

  .right {
    z-index: 99;
    flex: 1;
    --van-card-background-color: #fff;
  }
}
</style>